import React, { Component } from 'react'
import userModel from "../services/userinfo/Service";

export default class AddUser extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            list: [],
            username: "",
            userpwd: ""
        }

    }

    async componentDidMount() {
        let { data: list } = await userModel.query({ type: 2 });//普通用户
        this.setState({
            list
        })

    }
    add =async () => {

        let {data} = await  userModel.add({username:this.state.username,userpwd:this.state.userpwd,type:2});

        this.setState({
            list:[...this.state.list,data]
        })

    }

    render() {
        return (
            <div>AddUser

                <div>
                    <div>用户名 <input type="text" value={this.state.username} onChange={(e) => {
                        this.setState({
                            username: e.target.value
                        })
                    }} /></div>
                    <div>密码 <input type="text" value={this.state.userpwd} onChange={(e) => {
                        this.setState({
                            userpwd: e.target.value
                        })
                    }} /></div>
                    <button onClick={() => {
                        this.add();
                    }}>新增</button>
                </div>

                <div className='user'>
                    <div className='table'>
                        <div className='tr'>
                            <div className='td'>编号</div>
                            <div className='td'>用户名</div>
                            <div className='td'>密码</div>
                            <div className='td'>操作</div>
                        </div>
                        {this.state.list.map((item: any, index: number) => {

                            return (<div className='tr' key={item.id}>
                                <div className='td'>{item.id}</div>
                                <div className='td'>{item.username}</div>
                                <div className='td'>{item.userpwd}</div>
                                <div className='td'>删除</div>
                            </div>)
                        })}

                    </div>
                </div>





            </div>
        )
    }
}
